<template>
  <div class="container">
    <!-- 头部标题相关 -->
    <div class="hmmm-title">
      <span class="hmmm-txt">说明：目前支持学科和关键字条件筛选</span>
      <el-button
        type="success"
        icon="el-icon-edit"
        @click="$router.push('/questions/new')"
        >新增试题</el-button
      >
    </div>
    <!-- 标签栏form -->
    <el-form ref="form" :model="form" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="学科" prop="value1">
              <el-select
                v-model="form.value1"
                placeholder="请选择"
                @change="handleChange1"
              >
                <el-option
                  v-for="item in form.options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="二级目录" prop="value2">
              <el-select
                v-model="form.value2"
                placeholder="请选择"
                @change="handleChange2"
              >
                <el-option
                  v-for="item in form.options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="标签" prop="value3">
              <el-select v-model="form.value3" placeholder="请选择">
                <el-option
                  v-for="item in form.options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="关键字" prop="value4">
              <el-input
                v-model="form.value4"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="试题类型" prop="value5">
              <el-select v-model="form.value5" placeholder="请选择">
                <el-option
                  v-for="item in form.questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="难度" prop="value6">
              <el-select v-model="form.value6" placeholder="请选择">
                <el-option
                  v-for="item in form.difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="方向" prop="value7">
              <el-select v-model="form.value7" placeholder="请选择">
                <el-option
                  v-for="item in form.direction"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="录入人" prop="value8">
              <el-select v-model="form.value8" placeholder="请选择">
                <el-option
                  v-for="item in form.people"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="题目备注" prop="value9">
              <el-input v-model="form.value9" placeholder=""></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="企业简称" prop="value10">
              <el-input v-model="form.value10" placeholder=""></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="城市" class="dbInput" prop="value11">
              <el-select
                v-model="form.value11"
                placeholder="请选择"
                @change="handleCitys"
              >
                <el-option
                  v-for="item in form.provinces"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select v-model="form.value12" placeholder="请选择">
                <el-option
                  v-for="item in form.citys"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item>
              <el-button @click="handleClear">清除</el-button>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 预览弹出框 -->
    <questions-preview
      :flag="dialogFormVisible"
      @close="dialogFormVisible = false"
      :row="row"
    >
    </questions-preview>
    <!-- 题目审核弹出框 -->
    <questions-check
       v-if="flagQuestion"
      :flag="flagQuestion"
      :checkId="checkId"
      @closeQuestion="flagQuestion = false"
      @okClose="handleClose"
    ></questions-check>
    <!-- tabs栏 -->
    <el-tabs type="border-card" @tab-click="handleFilter(1)" v-model="activeName">
      <template>
        <el-alert type="info" show-icon>数据一共{{ counts }}条</el-alert>
      </template>
      <!-- table -->
      <el-tab-pane label="全部"></el-tab-pane>
      <el-tab-pane label="待审核"></el-tab-pane>
      <el-tab-pane label="已审核"></el-tab-pane>
      <el-tab-pane label="已拒绝"></el-tab-pane>
      <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="150">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
          </el-table-column>
          <el-table-column prop="question" label="题干" width="250">
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="200">
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="120">
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column prop="publishState" label="发布状态" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >预览</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.chkState !== '待审核' ? true : false"
                @click="handleCheck(scope.row)"
                >审核</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.publishState === '已发布' ? true : false"
                @click="$router.push(`/questions/new?id=${scope.row.id}`)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="handleState(scope.row)"
                >{{ scope.row.text }}</el-button
              >
              <el-button type="text" size="small" :disabled="scope.row.publishState === '已发布' ? true : false" @click="handleDel(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      <!-- 底部分页跳转 -->
      <template>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30, 40, 50]"
            :page-size="5"
            layout="prev, pager, next,  sizes, jumper"
            background
            :total="counts "
          >
          </el-pagination>
        </div>
      </template>
    </el-tabs>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { simple as directorys } from '@/api/hmmm/directorys.js'
import { simple as tags } from '@/api/hmmm/tags.js'
import { choice, detail, choicePublish, remove } from '@/api/hmmm/questions.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import QuestionsPreview from '../components/questions-preview'
import QuestionsCheck from '../components/questions-check.vue'
import { parseTime } from '@/utils/index.js'
export default {
  components: {
    QuestionsPreview,
    QuestionsCheck
  },
  data () {
    return {
      // 表单数据
      form: {
        options1: [],
        value1: '',
        options2: [],
        value2: '',
        options3: [],
        value3: '',
        value4: '',
        questionType,
        value5: '',
        difficulty,
        value6: '',
        direction,
        value7: '',
        people: ['超级管理员'],
        value8: '',
        value9: '',
        value10: '',
        citys,
        provinces: provinces(),
        value11: '',
        value12: ''
      },
      counts: 0,
      tableData: [],
      currentPage: 1,
      page: 1,
      pagesize: 5,
      dialogFormVisible: false,
      row: {},
      flagQuestion: false,
      checkId: 1,
      activeName: 0
    }
  },
  async created () {
    // 初始学科拿数据
    const { data } = await simple()
    // console.log(data)
    this.form.options1 = data
    // 初始列表数据
    // console.log(this.$route)
    this.handleInit()
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    // 条数
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.handleFilter()
    },
    // 当前页
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.handleFilter()
    },
    // 渲染
    async handleInit (data) {
      console.log('重新选染')
      if (!data) {
        console.log('初始化渲染')
        const { data: res } = await choice({
          page: this.page,
          pagesize: this.pagesize
        })
        data = res
      }
      // console.log(data)
      data.items.forEach((item) => {
        item.addDate = parseTime(item.addDate)
        item.questionType =
          item.questionType === '1'
            ? '单选'
            : item.questionType === '2'
              ? '多选'
              : '简答'
        item.difficulty =
          item.difficulty === '1'
            ? '简单'
            : item.difficulty === '2'
              ? '一般'
              : '困难'
        item.chkState =
          item.chkState === 0
            ? '待审核'
            : item.chkState === 1
              ? '已审核'
              : '已拒绝'
        item.text = item.publishState === 1 ? '下架' : '上架'
        item.publishState =
          item.publishState === 0
            ? '待发布'
            : item.publishState === 1
              ? '已发布'
              : '已下架'
        item.question = item.question.replace(/<[^>]+>/g, '')
      })
      // console.log(data.items)
      this.tableData = data.items
      this.counts = data.counts

      // console.log(this.tableData)
    },
    // 处理学科选择事件
    async handleChange1 () {
      // console.log(this.form.value1)
      const { data } = await directorys({ subjectID: this.form.value1 })
      // console.log(res)
      this.form.value3 = ''
      this.form.value2 = ''
      this.form.options2 = data
    },
    // 处理二级目录选择事件
    async handleChange2 () {
      const { data } = await tags({ subjectID: this.form.value2 })
      // console.log(data)
      this.form.value3 = ''
      this.form.options3 = data
    },
    // 处理搜索事件
    async handleSearch () {
      console.log(this.options2)
      const { data } = await choice({
        keyword: this.form.value4 || null,
        page: this.page,
        pagesize: this.pagesize,
        subjectID: this.form.value1 || null
      })
      this.handleInit(data)
    },
    // 根据城市选区域
    handleCitys () {
      // console.log(this.form.value11)
      this.form.citys = citys(this.form.value11)
    },
    // 重置表单数据
    handleClear () {
      // console.log(this.$refs.form)
      this.form.value12 = ''
      this.$refs.form.resetFields()
    },
    // 预览
    async handleClick (data) {
      this.dialogFormVisible = true
      // console.log(data)
      const res = await detail({ id: data.id })
      // console.log(res.data)
      res.data.questionType =
        res.data.questionType === '1'
          ? '单选'
          : res.data.questionType === '2'
            ? '多选'
            : '简答'
      res.data.difficulty =
        res.data.difficulty === '1'
          ? '简单'
          : res.data.difficulty === '2'
            ? '一般'
            : '困难'
      res.data.chkState =
        res.data.chkState === 1
          ? '已审核'
          : res.data.chkState === 2
            ? '待审核'
            : '已拒绝'
      res.data.publishState =
        res.data.publishState === 0
          ? '待发布'
          : res.data.publishState === 1
            ? '已下架'
            : '已发布'
      res.data.question = res.data.question.replace(/<[^>]+>/g, '')
      res.data.answer = res.data.answer.replace(/<[^>]+>/g, '')
      // console.log(res.data)
      this.row = res.data
    },
    // 试题审核
    handleCheck (data) {
      this.checkId = data.id
      this.flagQuestion = true
      // console.log(data.id)
    },
    // 筛选事件
    async handleFilter (val) {
      console.log(this.options1)
      // console.log(+this.activeName)
      const chkState = +this.activeName - 1
      if (val === 1) this.page = 1
      if (chkState === -1) {
        const { data } = await choice({
          page: this.page,
          pagesize: this.pagesize,
          subjectID: this.form.value1 || null,
          keyword: this.form.value4 || null
        })
        this.handleInit(data)
      } else {
        // console.log(chkState)
        const { data } = await choice({
          page: this.page,
          pagesize: this.pagesize,
          chkState,
          subjectID: this.form.value1 || null,
          keyword: this.form.value4 || null
        })
        // console.log(data)
        this.handleInit(data)
      }
    },
    // 审核后渲染
    handleClose () {
      this.handleFilter()
      this.flagQuestion = false
    },
    // 修改
    // 上下架
    async handleState (data) {
      const text = data.publishState === '已下架' ? '上架' : '下架'
      console.log(text)
      this.$confirm(`您确认${text}这道题目吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        data.publishState = data.publishState === '已下架' ? data.publishState = 1 : data.publishState = 2
        const { data: res } = await choicePublish(data)
        if (res.success === true) {
          this.$message.success(`${text}成功`)
          this.handleFilter()
        }
      }).catch(() => {
        this.$message.success('已取消')
      })
    },
    // 删除
    handleDel (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(data)
        const { data: res } = await remove(data)
        if (res.success === true) {
          this.$message.success('删除成功')
          this.handleInit()
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  width: 98%;
  padding: 20px;
  margin: 12px 0px 0 10px;
  background-color: #fff;
  .hmmm-title {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: pink;
    margin-bottom: 15px;
    .el-button {
      font-size: 12px;
      height: 33px;
      width: 112px;
    }
  }
  .el-row {
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: right;
    .el-button {
      width: 55px;
      height: 31px;
      font-size: 12px;
      padding: 9px;
    }
    .dbInput {
      ::v-deep .el-form-item__content {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  ::v-deep .el-tabs__header {
    background-color: #fff;
  }
  .el-tabs__content {
    .el-alert {
      margin-bottom: 15px;
    }
  }
  .el-table {
    margin-bottom: 15px;
  }
  .block {
    text-align: right;
  }
}
</style>
